<template>
  <view class="container">
    <view class="header">
      <text class="title">赚钱排行榜</text>
    </view>
    
    <!-- 加载状态 -->
    <view v-if="loading" class="loading-container">
      <text class="loading-text">加载中...</text>
    </view>
    
    <!-- 错误状态 -->
    <view v-else-if="error" class="error-container">
      <text class="error-text">加载失败，请重试</text>
      <button class="retry-btn" @click="fetchRankings">重试</button>
    </view>
    
    <!-- 排行榜列表 -->
    <view v-else class="ranking-list">
      <!-- 前三名特殊样式 -->
      <view v-for="item in topThree" :key="item.rank" class="top-item">
        <view class="rank-badge" :class="{'first': item.rank === 1, 'second': item.rank === 2, 'third': item.rank === 3}">
          <text>{{ item.rank }}</text>
        </view>
        <view class="user-info">
          <text class="username">{{ item.username }}</text>
          <text class="earnings">收益: {{ item.earnings }} 元</text>
        </view>
      </view>
      
      <!-- 其他排名 -->
      <view v-for="item in otherRankings" :key="item.rank" class="normal-item">
        <view class="rank-number">{{ item.rank }}</view>
        <view class="user-info">
          <text class="username">{{ item.username }}</text>
          <text class="earnings">收益: {{ item.earnings }} 元</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { getTopRankings } from '../../apis/ranking';

// 定义数据类型
interface RankingItem {
  rank: number;
  username: string;
  earnings: number;
}

// 状态管理
const rankings = ref<RankingItem[]>([]);
const loading = ref(true);
const error = ref(false);
const topN = ref("10")

// 获取排行榜数据
const fetchRankings = async () => {
  loading.value = true;
  error.value = false;
  
  try {
    const res = await getTopRankings();
    rankings.value = res.data.data || [];
  } catch (err) {
    console.error('获取排行榜失败', err);
    error.value = true;
  } finally {
    loading.value = false;
  }
};

// 计算属性：前三名
const topThree = computed(() => rankings.value.slice(0, 3));

// 计算属性：其他排名
const otherRankings = computed(() => rankings.value.slice(3));

// 生命周期钩子
onMounted(() => {
  fetchRankings();
});
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.header {
  padding: 30rpx 0;
  text-align: center;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.loading-container, .error-container {
  padding: 100rpx 0;
  text-align: center;
}

.loading-text, .error-text {
  font-size: 28rpx;
  color: #666;
}

.retry-btn {
  margin-top: 20rpx;
  padding: 10rpx 30rpx;
  background-color: #409EFF;
  color: white;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.ranking-list {
  background-color: white;
  border-radius: 12rpx;
  padding: 20rpx;
}

.top-item {
  display: flex;
  align-items: center;
  padding: 25rpx 20rpx;
  border-bottom: 1rpx solid #eee;
}

.normal-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.rank-badge {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  font-weight: bold;
}

.first {
  background-color: #FFD700;
  color: #8B4513;
}

.second {
  background-color: #C0C0C0;
  color: #555;
}

.third {
  background-color: #CD7F32;
  color: #fff;
}

.rank-number {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  font-size: 24rpx;
  color: #666;
}

.user-info {
  flex: 1;
}

.username {
  font-size: 30rpx;
  color: #333;
  display: block;
}

.earnings {
  font-size: 26rpx;
  color: #999;
  display: block;
  margin-top: 5rpx;
}
</style>    